import React from 'react';
import { getKeys } from '../utils/utility';

interface IColProps {
  xs?: number;
  sm?: number;
  md?: number;
  lg?: number;

  xsOffset?: number;
  smOffset?: number;
  mdOffset?: number;
  lgOffset?: number;

  xsPull?: number;
  smPull?: number;
  mdPull?: number;
  lgPull?: number;

  xsPush?: number;
  smPush?: number;
  mdPush?: number;
  lgPush?: number;

  xsHidden?: boolean;
  smHidden?: boolean;
  mdHidden?: boolean;
  lgHidden?: boolean;

  className?: string;
}

const colClasses = {
  xs: 'col-xs',
  sm: 'col-sm',
  md: 'col-md',
  lg: 'col-lg',

  xsOffset: 'col-xs-offset',
  smOffset: 'col-sm-offset',
  mdOffset: 'col-md-offset',
  lgOffset: 'col-lg-offset',

  xsPull: 'col-xs-pull',
  smPull: 'col-sm-pull',
  mdPull: 'col-md-pull',
  lgPull: 'col-lg-pull',

  xsPush: 'col-xs-push',
  smPush: 'col-sm-push',
  mdPush: 'col-md-push',
  lgPush: 'col-md-push',
};

const hiddenMap = {
  xsHidden: 'hidden-xs',
  smHidden: 'hidden-xs',
  mdHidden: 'hidden-xs',
  lgHidden: 'hidden-xs',
};

export default class Col extends React.Component<IColProps> {
  public render() {
    const classNames: string[] = [];
    getKeys(colClasses).forEach((key) => {
      if (this.props[key]) {
        const col = `${this.props[key]}`.replace('.', '-');
        classNames.push(`${colClasses[key]}-${col}`);
      }
    });

    getKeys(hiddenMap).forEach((key) => {
      if (this.props[key]) {
        classNames.push(hiddenMap[key]);
      }
    });

    const propsClassName = this.props.className || '';
    const classString = `${classNames.join(' ')} ${propsClassName}`;
    return <div className={classString}>{this.props.children}</div>;
  }
}
